<template>
  <li class="shop__list__item">
    <img :src="item.imgUrl" alt="" class="shop__list__item__img" />
    <div
      :class="{
        shop__list__item__content: true,
        'shop__list__item__content--hide': hiderBoder ? false : true,
      }"
    >
      <div class="shop__list__item__content__title">{{ item.name }}</div>
      <div class="shop__list__item__content__tags">
        <span class="shop__list__item__content__tags__tag"
          >月售{{ item.sales }}+</span
        >
        <span class="shop__list__item__content__tags__tag"
          >起送￥{{ item.expressLimit }}</span
        >
        <span class="shop__list__item__content__tags__tag"
          >基础运费￥{{ item.expressPrice }}</span
        >
      </div>
      <p class="shop__list__item__content__discounts">
        {{ item.slogan }}
      </p>
      <div class="products" v-if="item.products">
        <div
          class="product"
          v-for="product in item.products"
          :key="product.name"
        >
          <img :src="product.imgUrl" alt="" class="product__img" />
          <p class="product__title">{{ product.name }}</p>
          <p class="product__price">
            &yen;<span class="product__price__now">{{ product.price }}</span>
            <span class="product__price__old">&yen;{{ product.oldPrice }}</span>
          </p>
        </div>
      </div>
    </div>
  </li>
</template>

<script>
export default {
  props: ["item", "hiderBoder"],
};
</script>
<style lang="scss" scoped>
@import "../../style/viriables.scss";
@import "../../style/mixins.scss";
.shop__list__item {
  display: flex;
  padding: 0.12rem 0;
  &__img {
    width: 0.56rem;
    height: 0.56rem;
    margin-right: 0.16rem;
  }
  &__content {
    flex: 1;
    padding-bottom: 0.12rem;
    &--hide {
      border-bottom: 0.01rem solid $content-bgColor;
    }
    &__title {
      font-size: 0.16rem;
      color: $content-fontcolor;
    }
    &__tags {
      margin-top: 0.08rem;
      &__tag {
        font-size: 0.13rem;
        color: $content-fontcolor;
        margin-right: 0.16rem;
      }
    }
    &__discounts {
      margin: 0.08rem 0 0 0;
      color: $color-e93b;
      font-size: 0.13rem;
    }
  }
}
.products {
  display: flex;
  margin-top: 0.08rem;
}
.product {
  margin-right: 0.16rem;
  width: 0.76rem;
  &__img {
    width: 0.76rem;
    height: 0.76rem;
  }
  p {
    margin: 0;
  }
  &__title {
    margin-top: 0.04rem;
    font-size: 0.12rem;
    color: $content-fontcolor;
    line-height: 0.17rem;
    @include ellipsis;
  }
  &__price {
    margin-top: 0.03rem;
    color: $color-e93b;
    font-size: 0.12rem;
    line-height: 0.2rem;
    &__now {
      font-size: 0.14rem;
    }
    &__old {
      color: $color-999;
      text-decoration: line-through;
      margin-left: 0.04rem;
      @include ellipsis;
    }
  }
}
</style>